import React, { CSSProperties } from 'react'
import styled from 'styled-components'

const Container = styled.div`
    
`

const Row = styled.div`
    display: flex;
    justify-content: start;
`
const Column = styled.div<{ $width: string }>`
    width: ${({ $width }) => $width};
    font-size: .6875rem;
    color: white;
`

export interface ColumnData {
    label: string | React.ReactNode,
    style?: CSSProperties,
    className?: string;
    width?: string,
}

interface Porps {
    data: ColumnData[][]
    className?: string;
    rowClassName?: string;
}


const Item: React.FC<Porps> = ({ data, className, rowClassName }) => {
    return <Container className={className}>
        {data.map((row, idx) => <Row
            className={rowClassName}
            key={idx}
        >
            {row.map((item, innerIdx) => <Column
                $width={item.width || 'auto'}
                key={innerIdx}
                style={item.style}
                className={item.className}
            >
                {item.label}
            </Column>)}
        </Row>)}
    </Container>
}

export default
    Item